<template>
	<el-drawer :size="language == 'zh'?'40%':'50%'" v-model="applicationLabelVisible" append-to-body>
		<template #header>{{ applicationLabelMsg.title }}</template>

		<el-scrollbar height="100%">
			<el-form :model="applicationLabelFromData" label-position="top" :rules="applicationLabelRules" ref="ruleFormRef">
				<el-row :gutter="40">
					<el-col :span="12">
						<el-form-item :label="$t('goods_information_consumer.quantity_num')" prop="quantity" >
							<el-input class="qf_input" v-number type="text" v-model="applicationLabelFromData.quantity" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('goods_information_consumer.release_method_type')" prop="release_method_type">
							<el-select class="qf_select" filterable :placeholder="$t('merak.placeholder_select')" v-model="applicationLabelFromData.release_method_type">
								<el-option :label="item?.label" :value="item?.value"
									v-for="item in applicationLabelOptions?.applicationType" :key="item?.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item prop="deliver_date" :label="$t('goods_information_consumer.deliver_date')">
							<el-date-picker class="qf_date" type="date" :placeholder="$t('merak.placeholder_select')" v-model="applicationLabelFromData.deliver_date" :format="format" value-format="YYYY-MM-DD"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item prop="production_date" :label="$t('goods_information_consumer.production_date')">
							<el-date-picker class="qf_date" type="date" :placeholder="$t('merak.placeholder_select')" v-model="applicationLabelFromData.production_date" :format="format" :value-format="format"/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('goods_information_consumer.apply_order_type')" prop="apply_order_type">
							<el-select class="qf_select" filterable :placeholder="$t('merak.placeholder_select')" v-model="applicationLabelFromData.apply_order_type">
								<el-option :label="item?.label" :value="item?.value"
									v-for="item in applicationLabelOptions?.distributionType" :key="item?.value" />
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="12">
						<el-form-item :label="$t('goods_information_consumer.num_in_container')" :error="applicationLabelNewRules.num_in_container">
							<el-input v-number class="qf_input" type="text" v-model="applicationLabelFromData.num_in_container" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="$t('goods_information_consumer.shipping_mark')">
							<el-select @change="showAddress" class="qf_select" filterable :placeholder="$t('merak.placeholder_select')" v-model="applicationLabelFromData.express_pdf">
								<el-option :label="item?.label" :value="item?.value"
									v-for="item in applicationLabelOptions?.expressPdfType" :key="item?.value" />
							</el-select>
							<div class="address_message">{{addressValue}}</div>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="applicationLabelOptions?.manufacturerType.length>0">
						<el-form-item :label="$t('goods_information_consumer.import_company_id')">
							<el-select @change="showAddress" class="qf_select" filterable :placeholder="$t('merak.placeholder_select')" v-model="applicationLabelFromData.import_company_id">
								<el-option :label="item?.label" :value="item?.value"
									v-for="item in applicationLabelOptions?.manufacturerType" :key="item?.value" />
							</el-select>
							<div class="address_message">{{addressValue}}</div>
						</el-form-item>
					</el-col>
					
				</el-row>
			</el-form>
		</el-scrollbar>
		<template #footer>
			<el-button type="default" @click="applicationLabelResetFn(ruleFormRef)">{{ applicationLabelMsg.cancel }}</el-button>
			<el-button type="primary" @click="applicationLabelSavetFn(ruleFormRef)">{{ applicationLabelMsg.save }}</el-button>
		</template>
	</el-drawer>
</template>
<script setup lang='ts' name='editQifaPropsC'>
	import type { FormInstance, FormRules} from "element-plus";
	import {
		ref,
		reactive,
		getCurrentInstance,
		inject,
		h,
		defineComponent,
		computed
	} from "vue";
	import {
		useGlobalStore
	} from "@/stores/modules/global";
	import useDateFormat from "@/hooks/useDateFormat";
	const { format } = useDateFormat();
	const ruleFormRef = ref<FormInstance>()
	const globalStore = useGlobalStore();
	const language = computed(() => globalStore.language); //页面翻译语种
	const addressValue = ref('');
	const showAddress = row =>{
		console.log(row)
		let aIdx = applicationLabelOptions?.manufacturerType.findIndex(item=>row == item.value);
		if(aIdx != -1){
			addressValue.value = applicationLabelOptions?.manufacturerType[aIdx].address
		}
	}
	const applicationLabelVisible = inject("applicationLabelVisible");
	const applicationLabelMsg = inject("applicationLabelMsg");
	const applicationLabelFromData = inject("applicationLabelFromData");
	const applicationLabelOptions = inject("applicationLabelOptions");
	const applicationLabelResetFn = inject("applicationLabelResetFn");
	const applicationLabelSavetFn = inject("applicationLabelSavetFn");
	const applicationLabelRules = inject("applicationLabelRules");
	const applicationLabelNewRules = inject("applicationLabelNewRules");
</script>
<style lang='scss' scoped>
	.address_message{
		padding: 0 12px;
		font-size: 13px;
	}
	:deep(.qf_date){
		width: 100%;
	}
	:deep(.el-col-24){
		padding: 0 !important;
	}
</style>